<!-- Page header -->
<div class="page-header d-print-none">
  <div class="container-xl">
    <div class="row g-2 align-items-center">
      <div class="col-8">
        <!-- 页面标题 -->
        <h2 class="page-title">
          发布新职位
        </h2>
      </div>
    </div>
  </div>
</div>
<!-- Page body -->
<div class="page-body">
  <div class="container-xl">
    <div class="card">
      <div class="card-body">
        <!-- 标题 -->
        <div class="row g-3">
          <div class="mb-3">
            <label class="form-label"><strong>标题</strong></label>
            <div class="input-group">
              <span class="input-group-text">
                <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-letter-t"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M6 4l12 0" /><path d="M12 4l0 16" /></svg>
              </span>
              <input type="text" class="form-control" placeholder="请输入标题" id="job-new-title">
            </div>
          </div>
        </div>

        <div class="row g-3 align-items-center mb-3">
          <!-- 最低价 最高价 -->
          <div class="col-md-3">
            <label class="form-label"><strong>最低价</strong></label>
            <div class="input-group">
              <span class="input-group-text">
                ￥
              </span>
              <input type="number" min="0" class="form-control" placeholder="最低价" autocomplete="off" value="0" id="job-new-reward-lower">
            </div>
          </div>
          <!-- <div class="col-auto">—</div> -->
          <div class="col-md-3">
            <label class="form-label"><strong>最高价</strong></label>
            <div class="input-group">
              <span class="input-group-text">
                ￥
              </span>
              <input type="number" min="0" class="form-control" placeholder="最高价" autocomplete="off" value="0" id="job-new-reward-upper">
            </div>
          </div>

          <!-- 时间限制 -->
          <div class="col-md">
            <label class="form-label"><strong>有效期(天数)</strong></label>
            <div class="input-group">
              <span class="input-group-text">
                <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-calendar-time"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M11.795 21h-6.795a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v4" /><path d="M18 18m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M15 3v4" /><path d="M7 3v4" /><path d="M3 11h16" /><path d="M18 16.496v1.504l1 1" /></svg>
              </span>
              <input type="number" min="0" placeholder="请输入有效期" class="form-control" id="job-new-expires-days">
            </div>
          </div>
        </div>

        <!-- 内容 -->
        <div class="row g-3">
          <div class="mb-3" style="height: 680px">
            <label class="form-label"><strong>职位描述</strong></label>
              <div id="new_job_content">
                <!-- textarea也是一个表单控件，当在editor.md中编辑好的内容会关联这个文本域上 -->
                <textarea id="job_new_content" style="display: none;"></textarea>
              </div>
          </div>
        </div>
      <!-- CARD 结束 -->
      </div>
      

      <!-- 页脚 -->
      <div class="card-footer bg-transparent mt-auto">
        <div class="btn-list justify-content-end">
          <a href="javascript:void(0);" class="btn btn-warning col-2" id="job-new-save-btn">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-save" viewBox="0 0 16 16">
              <path d="M2 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H9.5a1 1 0 0 0-1 1v7.293l2.646-2.647a.5.5 0 0 1 .708.708l-3.5 3.5a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L7.5 9.293V2a2 2 0 0 1 2-2H14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h2.5a.5.5 0 0 1 0 1H2z"/>
            </svg>
            &nbsp; 保存草稿
          </a>
          <a href="javascript:void(0);" class="btn btn-primary col-2" id="job-new-publish-btn">
            <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-check"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l5 5l10 -10" /></svg>
            &nbsp;确认发布
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  // 发布新职位
  $(function () {
    // 初始化编辑器
    var editor = editormd("new_job_content", {
        width  : "100%",
        height : "100%",
        // theme : "dark",
        // previewTheme : "dark",
        // editorTheme : "pastel-on-dark",
        codeFold : true,
        markdown : '', // 处理编辑区内容
        //syncScrolling : false,
        saveHTMLToTextarea : true,    // 保存 HTML 到 Textarea
        searchReplace : true,
        //watch : false,                    // 关闭实时预览
        htmlDecode : "style,script,iframe|on*",            // 开启 HTML 标签解析，为了安全性，默认不开启    
        // toolbar  : false,             //关闭工具栏
        // previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮，默认开启
        emoji : true,
        taskList : true,
        tocm            : true,         // Using [TOCM]
        tex : true,                     // 开启科学公式TeX语言支持，默认关闭
        // flowChart : true,               // 开启流程图支持，默认关闭
        // sequenceDiagram : true,         // 开启时序/序列图支持，默认关闭,
        placeholder : '开始创作...',     // 占位符
        path   : "./dist/editor.md/lib/"
    });

    // 绑定按钮事件
    $('#job-new-save-btn').click(function(){
      // 保存草稿
      jobPublish(0);
    });
    $('#job-new-publish-btn').click(function(){
      // 直接发布
      jobPublish(1);
    });

    function jobPublish(state) {
      // 校验
      // 标题
      let jobTitleEL = $('#job-new-title');
      if (!jobTitleEL.val()) {
        // 错误提示
        toastWarning('标题不能为空')
        // 获得焦点
        jobTitleEL.focus();
        return;
      }
      // 最低价
      let jobRewardLowerEL = $('#job-new-reward-lower');
      if (!jobRewardLowerEL.val() || jobRewardLowerEL.val() < 0) {
        // 错误提示
        toastWarning('最低价不能为空')
        // 获得焦点
        jobRewardLowerEL.focus();
        return;
      }
      // 最高价
      let jobRewardUpperEL = $('#job-new-reward-upper');
      if (!jobRewardUpperEL.val() || jobRewardUpperEL.val() < 0) {
        // 错误提示
        toastWarning('最高价不能为空')
        // 获得焦点
        jobRewardUpperEL.focus();
        return;
      }
      // 最低价小于最高价
      if(jobRewardLowerEL.val() > jobRewardUpperEL.val()) {
        // 错误提示
        toastWarning('最低价应该小于最高价')
        // 获得焦点
        jobRewardUpperEL.focus();
        return;
      }
      // 有效天数jobExpiresDaysEL
      let jobExpiresDaysEL = $('#job-new-expires-days');
      if (!jobExpiresDaysEL.val() || jobExpiresDaysEL.val() < 0) {
        // 错误提示
        toastWarning('有效天数不能为空')
        // 获得焦点
        jobExpiresDaysEL.focus();
        return;
      }
      // 内容
      let jobNewContentEL = $('#job_new_content');
      if (!jobNewContentEL.val()) {
        // 错误提示
        toastWarning('职位描述不能为空')
        // 获得焦点
        jobNewContentEL.focus();
        return;
      }

      // 构造数据
      let sendData = {
        title : jobTitleEL.val(),
        rewardLower : jobRewardLowerEL.val(),
        rewardUpper : jobRewardUpperEL.val(),
        timeLimit : jobExpiresDaysEL.val(),
        state : state,
        description : jobNewContentEL.val()
      };

      // 发送请求
      $.ajax({
        type : 'post',
        url : 'job/publish',
        data : JSON.stringify(sendData),
        success : function (respData) {
          if (respData.code != 0) {
            // 提示
            toastInfo(respData.message);
            return;
          }
          // 提示
          $.toast({
            heading: '提示',
            text: '发布成功，请在职位列表中查看状态.',
            icon: 'success'
          });
          // 跳转到职位列表
          $('#bit-page-content').load('job_list.html');
        }
      });
    }
  });
</script>